<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="quyu">
    <div class="dw-top">
      <p>区域搜索：</p>
      <form action="">
        <input type="text" placeholder="请输入" class="inp" v-model.trim="value" />
      </form>
      <el-button type="primary" icon="el-icon-search" @click.native="searchBtn"
        >搜索</el-button
      >
      <el-button type="success" @click.native="allBtn">全部信息</el-button>
    </div>
    <div class="dw-bottom">
      <div class="dw-add">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click.native="newBtn"
          >新建</el-button
        >
      </div>
      <!-- 列表区域 -->
      <div class="dw-content">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="num" label="序号" width="80" type="index">
          </el-table-column>
          <el-table-column prop="name" label="区域名称" width="290">
          </el-table-column>
          <el-table-column prop="nodeCount" label="点位数" width="290">
          </el-table-column>
          <el-table-column prop="remark" label="备注说明" width="290">
          </el-table-column>
          <el-table-column prop="labor" label="操作" width="200" class="caozuo">
            <template slot-scope="scope">
              <span @click="qyCha(scope.row)">查看详情</span>
              <span @click="qyXg(scope.row)">修改</span>
              <span @click="qyDel(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="dw-footer">
          <p>
            共{{ totalCount }}条记录 第 {{ data.pageIndex }}/{{ totalPage }} 页
          </p>
          <div class="btn">
            <el-button class="btn1" @click="delFn" :disabled='isShow1'
              >上一页</el-button
            >
            <el-button class="btn2" @click="addFn" :disabled='isShow2'
              >下一页</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 新建内容 -->
    <el-dialog
      title="新增区域"
      :visible="Visible"
      width="630px"
      @close="Visible = false"
    >
      <span>
        <el-form
          :model="newForm"
          :rules="newRules"
          label-width="100px"
          class="demo-ruleForm"
          ref="newDom"
        >
          <el-form-item label="区域名称：" prop="regionName">
            <el-input
              v-model="newForm.regionName"
              autocomplete="off"
              placeholder="请输入"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="备注说明：" prop="remark">
            <el-input
              v-model="newForm.remark"
              type="textarea"
              placeholder="请输入备注（不超过40字）"
              autocomplete="off"
              maxlength="40"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Visible = false" class="noBtn">取 消</el-button>
        <el-button type="primary" @click="submit" class="yesBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 查看详情 -->
    <XinZeng :Visible.sync="VisibleCk"
    :qyxqList='qyxqList'
    :region = 'region'
    ></XinZeng>
    <!-- 修改 -->
    <XiuGai
    ref="QyXg"
    :Visible.sync="VisibleXG"
    :newForm2='newForm2'
    @qyXg1='qyXg1'
    :tableData='tableData'
    ></XiuGai>
  </div>
</template>

<script>
import XinZeng from './components/XinZeng.vue'
import XiuGai from './components/XiuGai.vue'
import { getQylist, newQu, delqy, getQyzq, xgQy } from '@/api/dianweiguanli/quyu'
export default {
  components: {
    XinZeng,
    XiuGai
  },
  data () {
    return {
      isShow1: true,
      isShow2: false,
      value: '',
      Visible: false,
      VisibleCk: false,
      VisibleXG: false,
      qyxqList: [],
      region: {},
      tableData: [
        {
          num: '序号',
          name: '区域',
          nodeCount: '点位数',
          remark: '备注',
          labor: '操作',
          id: ''
        }
      ],
      data: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: '', // 总量
      totalPage: '', // 总页数
      id: '',
      newForm: {
        regionName: '',
        remark: ''
      },
      newForm2: {
        regionName: '',
        remark: ''
      },
      newRules: {
        regionName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur'
          }
        ],
        remark: [
          { required: true, message: '请输入备注说明', trigger: 'blur' },
          {
            min: 1,
            max: 40,
            message: '长度在 1 到 40 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.xuanran()
  },
  mounted () {},
  methods: {
    async xuanran () {
      const res = await getQylist(this.data)
      // console.log('res :>> ', res)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
      this.id = res.data
    },
    // 下一页渲染
    async addFn () {
      // console.log('this.data.pageIndex :>> ', this.data.pageIndex)
      if (this.data.pageIndex < +this.totalPage) {
        this.isShow1 = false
        this.data.pageIndex++
      }
      if (this.data.pageIndex === +this.totalPage) {
        this.isShow2 = true
      }
      await this.xuanran()
    },
    // 上一页渲染
    async delFn () {
      if (this.data.pageIndex > 1) {
        this.isShow2 = false
        this.data.pageIndex--
      }
      if (this.data.pageIndex === 1) {
        this.isShow1 = true
      }
      await this.xuanran()
    },
    // 查询功能
    async searchBtn () {
      this.data.name = this.value
      const res = await getQylist(this.data)
      this.tableData = res.data.currentPageRecords
    },
    // 全部信息功能
    allBtn () {
      this.value = '' // 输入框清空
      delete this.data.name
      this.xuanran()
    },
    newBtn () {
      // console.log(1)
      this.Visible = true
    },
    // 提交信息
    async submit () {
      // 表单 校验
      const val = this.$refs.newDom.validate()
      try {
        if (val) {
          await newQu(this.newForm)
          this.$refs.newDom.resetFields()
          this.Visible = false
          this.xuanran()
        }
      } catch (error) {
        // console.log(error)
        this.$message.error(error.response.data)
      }
    },
    // 删除功能
    async qyDel (row) {
      // console.log(imdex, row)
      try {
        await delqy(row.id)
        this.xuanran()
      } catch (error) {
        // console.log('error :>> ', error)
        this.$message.error(error.response.data)
      }
    },
    // 查看功能
    async qyCha (row) {
      // 区域id
      this.data.regionId = row.id
      const res = await getQyzq(this.data)
      this.qyxqList = res.data.currentPageRecords
      this.region = res.data.currentPageRecords[0].region
      // console.log('this.qyxqList :>> ', this.qyxqList)
      this.VisibleCk = true
    },
    // 修改
    qyXg (row) {
      // console.log('row :>> ', row)
      // console.log('this.$refs.QyXg :>> ', this.$refs.QyXg)
      this.$refs.QyXg.newForm2 = {
        regionName: row.name,
        remark: row.remark,
        id: row.id
      }
      this.VisibleXG = true
    },
    // 完成修改功能
    async qyXg1 (obj) {
      await xgQy(obj)
      this.xuanran()
    }
  }
}
</script>
<style lang="less" scoped>
.quyu {
  * {
    box-sizing: border-box;
  }
  padding: 80px 20px 20px;
  background-color: #f8fafd;
  .dw-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    width: 1185px;
    height: 64px;
    background-color: #fff;
    p {
      margin-right: 12px;
      font-size: 14px;
      color: #606266;
    }
    .inp {
      width: 205px;
      height: 36px;
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #d8dde3;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: none;
      padding: 0 15px;
      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
    .el-button {
      margin-left: 12px;
      align-items: center;
      min-width: 80px;
      height: 36px;
      padding: 0;
      background-color: #5f84ff;
      font-size: 14px;
      color: #fff;
      border: none;
      padding: 0;
    }
  }
  .dw-bottom {
    padding-left: 17px;
    padding-top: 20px;
    width: 1185px;
    height: 673px;
    background-color: #fff;
    .dw-add {
      margin-bottom: 20px;
      width: 1153px;
      height: 36px;
      .el-button--primary {
        // display: inline-block;
        cursor: pointer;
        width: 80px;
        height: 36px;
        color: #fff;
        font-size: 14px;
        background-color: #ff6726;
        border-color: #ff6726;
        padding: 0;
      }
    }
    .dw-content {
      /deep/.el-table th {
        background-color: #f3f6fb;
      }
      span {
        margin-right: 10px;
        cursor: pointer;
        font-size: 14px;
        color: #5f84ff;
      }
      span:last-child {
        color: #ff5a5a;
      }
      .dw-footer {
        display: flex;
        justify-content: space-between;

        padding: 32px 16px;
        width: 1153px;
        height: 96px;
        p {
          font-size: 16px;
          color: #606266;
        }
        .btn {
          .btn1,
          .btn2 {
            // display: flex;
            background-color: #d5ddf8;
            width: 70px;
            height: 32px;
            margin: 0 16px;
            padding: 0;
          }
        }
      }
    }
  }
  /deep/.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    background: #fff;
    border-radius: 12px;
    // -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    // box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    // -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    .el-dialog__title {
      font-size: 18px;
      font-weight: 900;
      color: #333;
    }
    .el-dialog__body {
      padding: 20px 20px 0;
    }
    .el-form-item {
      display: flex;
      align-items: center;

      .el-form-item__content {
        margin-left: 0 !important;
      }
      .el-form-item__label {
      }

      .el-form-item__label {
        margin-left: 20px;
      }
      .el-input__inner {
        width: 396px;
        height: 36px;
      }
      .el-textarea__inner {
        width: 396px;
        height: 82px;
      }
    }
    .el-dialog__footer {
      margin-top: 0;
      text-align: center;
      .el-button {
        padding: 0;
        margin-right: 20px;
        width: 80px;
        height: 36px;
      }
      .noBtn {
        border-color: #f3e7e1;
        background-color: #f3e7e1;
        color: #333;
      }
      .yesBtn {
        border-color: #ff5e20;
        background-color: #ff5e20;
      }
    }
  }
}
</style>
